<template>
	<div class="swiper-container  swiper-no-swiping">
		<div class="swiper-wrapper">
			<div class="swiper-slide txt_recharge_list" v-for="(item, index) in list" :key="index"
			:class="{ recommend: item.is_recommend , on: index === activeIndex}"
			@click.stop="handleClick(item.money,item.integral ,item.images, item.reward_points, item.describe)"
			@click.prevent="activeIndex = index"
			@click="scrollToSlide(index)">
				<div class="recharge_list_dd">{{ item.integral }}积分</div>
                <div class="recharge_list_dt">￥{{item.money}}</div>
                <div class="recharge_list_p">总计到账{{ item.integral + item.reward_points }}积分</div>
                <div class="recharge_list_bottom">赠送：{{item.reward_points}}积分</div>
			</div>
		</div>
		<!-- 如果需要导航按钮 -->
		<div class="prevEl"><i class="el-icon-arrow-left"></i></div>
		<div class="nextEl"><i class="el-icon-arrow-right"></i></div>
	</div>
</template>

<script>
	import Swiper from 'swiper';
	import 'swiper/css/swiper.css';

	export default {
		name: 'MySwiper',
		props: {
			list: {
				type: Array,
				default: () => [],
			},
      default_index: {
			  type: Number,
        default: 0
      },

		},
		data() {
			return {
				mySwiper: null,
				activeIndex: this.default_index,
			};
		},
		mounted() {
			this.mySwiper = new Swiper('.swiper-container', {
				slidesPerView: 3,
				slidesPerGroup: 1,
				spaceBetween: 10,
				centeredSlides: true,
        		initialSlide: this.default_index - 0,
				navigation: {
					prevEl: ".prevEl",
					nextEl: ".nextEl",
				},
			});
		},
		methods: {
			handleClick(money,integral,images,reward_points,describe) {
				this.$emit('child-click', money,integral ,images,reward_points,describe)
			},
			scrollToSlide(index) {
				this.mySwiper.slideTo(index, 500, false); // use slideTo method to scroll to slide
			},
		},
	};
</script>


<style scoped>
.prevEl{ position: absolute; left: -25px; top: 50%; transform: translateY(-50%); z-index: 2; width: 26px; height: 41px; display: flex; align-items: center; justify-content: center; border-radius: 0px 100px 100px 0px; background: rgba(0,0,0,.17); cursor: pointer;}
.prevEl i{ position: relative; left: -4px;}
.nextEl{ position: absolute; right: -25px; top: 50%; transform: translateY(-50%); z-index: 2; width: 26px; height: 41px; display: flex; align-items: center; justify-content: center; border-radius: 100px 0px 0px 100px; background: rgba(0,0,0,.17); cursor: pointer;}
.prevEl.swiper-button-disabled,.nextEl.swiper-button-disabled{ display: none;}
.nextEl i{ position: relative; right: -4px;}
</style>
